<script lang="ts" setup>
import {reactive, ref, onMounted, nextTick, h, watch, computed, toRef, toRefs} from 'vue'
import {encryData, decryData} from '@/utils/utils'
import {
  getArticleDetail,
  getArticleContext,
  getHotArticle,
  updateArticleViewsCount,
  updateArticleLikeCount
} from '@/api/article'
import {useRouter, useRoute} from 'vue-router'
import Banner from '@/components/Banner/index.vue'
import MainCenter from '@/layout/MainCenter/index.vue'
import {message, notification} from 'ant-design-vue'
import {SmileOutlined} from '@ant-design/icons-vue';
import {TagOutlined, ClockCircleOutlined, EyeOutlined, LikeOutlined} from '@ant-design/icons-vue'
import {useStore} from "vuex";
import moment from 'moment'
import Clipboard from 'clipboard'
// 引入评论
// @ts-ignore
import Valine from 'valine/index';


const route = useRoute()
const router = useRouter()
const $store = useStore()

interface articleInfoInterFace {
  articleTitle: string,
  articleId: number,
  articleCover: string,
  articleContent: string,
  cates: Array<{ cateAlias: string, cateId: number, cateDesc: string, cateName: string }>,
  tags: Array<{ tagAlias: string, tagId: number, tagDesc: string, tagName: string }>,
  userAvatar?: string,
  userIp?: string,
  userName?: string,
  likeCount?: number,
  publicTime?: string,
  repliesCount?: string,
  viewsCount?: string | number
}

let articleInfo = reactive({
  articleTitle: '',
  articleId: 0,
  articleCover: '',
  articleContent: '',
  cates: [],
  tags: [],
  userAvatar: '',
  userIp: '',
  userParty: '',
  likeCount: 0,
  publicTime: '',
  repliesCount: 0,
  viewsCount: 0
})

// 获取当前页面文章数据
let isLoading = ref(false) // 骨架屏
let requestArticle = async () => {
  isLoading.value = true
  let articleId: any = route.params.articleId
  articleId = decryData(articleId)
  try {
    let res: any = await getArticleDetail(articleId)
    isLoading.value = false
    if (res.code == 200) {
      articleInfo.articleContent = res.articleInfo.articleContent
      articleInfo.articleId = res.articleInfo.articleId
      articleInfo.articleTitle = res.articleInfo.articleTitle
      articleInfo.articleCover = res.articleInfo.articleCover
      articleInfo.cates = res.articleInfo.cates
      articleInfo.tags = res.articleInfo.tags
      articleInfo.userAvatar = res.articleInfo.userAvatar
      articleInfo.userIp = res.articleInfo.userIp
      articleInfo.userParty = res.articleInfo.userParty
      articleInfo.likeCount = res.articleInfo.likeCount
      articleInfo.publicTime = moment(res.articleInfo.publicTime).format('YYYY-MM-DD HH:mm:ss')
      articleInfo.repliesCount = res.articleInfo.repliesCount
      articleInfo.viewsCount = res.articleInfo.viewsCount
      addArticleViewsCount() // 更新当前文章的浏览量
      getHostList()
      getAnborytems()
      window.addEventListener('scroll',windowScrollHandler)
      requestArticleContext(articleId)
      return
    }
    message.error(res.message)
  } catch (e: any) {
    isLoading.value = false
    message.error(e.message)
  }
}

let getArticleId = (): number => {
  let articleId: any = route.params.articleId
  articleId = decryData(articleId)
  return articleId
}

// 为当前文章更新阅读数量
const addArticleViewsCount = async () => {
  try {
    let articleId: any = route.params.articleId
    articleId = decryData(articleId)
    let data: any = await updateArticleViewsCount(articleId)
  } catch (e) {
    console.log('更新文章阅读数量失败')
  }
}


let hostList = ref<articleContextItem[]>([])
/* 获取热门文章列表 */
let getHostList = async () => {
  try {
    let res: any = await getHotArticle()
    // console.log('当前热门文章列表',res);
    if (res.code == 200) {
      res.hostList.forEach((item: articleContextItem) => {
        item.publicTime = moment(item.publicTime).format('YYYY-MM-DD HH:mm:ss')
      })
      hostList.value = res.hostList
    } else {

    }
  } catch (e: any) {
    message.error(e.message)
  }
}


// 目录interface
interface anchorItem {
  title: string, // 目录名
  lineIndex: string | number,
  indent: number // 当前目录属于几级目录
}

let preview = ref<any>(null) // ref节点
let titles = ref([]) // 文章的目录
let currentTitle = reactive({})
let progress = ref(0) // 进度条

// 检测当前文章的目录

interface articleContextItem {
  articleContent?: string,
  articleId?: number,
  articleCover?: string,
  articleDesc?: string,
  articleTitle?: string,
  publicTime?: string
}

// 上下文
let articleContext = reactive<{ prevArticle: articleContextItem, nextArticle: articleContextItem }>({
  prevArticle: {},
  nextArticle: {}
})

/* 获取当前文章的上下文 */
let requestArticleContext = async (articleId: number) => {
  try {
    let res: any = await getArticleContext(articleId)
    if (res.code === 200) {
      articleContext.prevArticle = res.prevArticle ? res.prevArticle : {}
      articleContext.nextArticle = res.nextArticle ? res.nextArticle : {}
      // console.log('获取到当前文章的上下文',articleContext);

    } else {
      message.error(res.message)
      return
    }
  } catch (e: any) {
    message.error(e.message)
  }
}


onMounted(() => {
  requestArticle()
})


/* 评论配置 */
onMounted(() => {
  let decodeArticleId = decryData(route.params.articleId) + ''
  new Valine({
    el: '#detailsComments',
    appId: '2KZ3d5BiBVh0hBlXCWUzDJ1A-gzGzoHsz',
    appKey: 'zqQKAEXucwv0OG9EckCrwP6E',
    placeholder: "你是我一生只会遇见一次的惊喜 ...",
    master: '5e9ffb05b3f5e9c13a764515f1b6b5b8',
    tagMeta: ["博主", "小伙伴", "访客"],
    avatar: 'monsterid',
    enableQQ: true,
    path: decodeArticleId,
  })

})


/* 获取当前文章的目录 */
let getAnborytems = () => {
  nextTick(() => {
    // @ts-ignore
    let abchors: any = preview?.value?.$el.querySelectorAll('h1,h2,h3,h4,h5,h6')
    let _titles = Array.from(abchors).filter((title: any) => !!title.innerText.trim())


    let inittitles:any[] = [];
    let levels = ["h1","h2","h3","h4"]
    let articleElement = preview?.value?.$el
    if(!articleElement){
      return inittitles
    }

    let elements:HTMLElement[] = Array.from(articleElement.querySelectorAll('*'))

    /* 调整标签等级 */
    let tagNames = new Set(elements.map((el) => el.tagName.toLowerCase()))
    for(let i = levels.length - 1; i >= 0;i--) {
      if(!tagNames.has(levels[i])){
        levels.splice(i,1)
      }
    }

    let serialNumbers = levels.map(() => 0)
    for (let i = 0; i < elements.length; i++) {
                const element = elements[i];
                let tagName = element.tagName.toLowerCase();
                let level = levels.indexOf(tagName);
                if (level == -1) continue;

                let id = tagName + "-" + element.innerText + "-" + i;
                let node = {
                    id,
                    level,
                    parent: null,
                    children: [],
                    rawName: element.innerText,
                    scrollTop: element.offsetTop,
                };

                if (inittitles.length > 0) {
                    let lastNode = inittitles.at(-1);

                    // 遇到子标题
                    if (lastNode.level < node.level) {
                        node.parent = lastNode;
                        lastNode.children.push(node);
                    }
                    // 遇到上一级标题
                    else if (lastNode.level > node.level) {
                        serialNumbers.fill(0, level + 1);
                        let parent = lastNode.parent;
                        while (parent) {
                            if (parent.level < node.level) {
                                parent.children.push(node);
                                node.parent = parent;
                                break;
                            }
                            parent = parent.parent;
                        }
                    }
                    // 遇到平级
                    else if (lastNode.parent) {
                        node.parent = lastNode.parent;
                        lastNode.parent.children.push(node);
                    }
                }

                serialNumbers[level] += 1;
                let serialNumber = serialNumbers.slice(0, level + 1).join(".");

                node.isVisible = node.parent == null;
                node.name = serialNumber + ". " + element.innerText;
                inittitles.push(node);
            }
            
            titles.value = inittitles
  })
}

// 设置子节点的可见性
function setChildrenVisible(title:any, isVisible:boolean) {
      for (const child of title.children) {
          child.isVisible = isVisible;
      }
  }

// 滚动到指定的位置
function scrollToView(scrollTop:number) {
    window.scrollTo({ top: scrollTop, behavior: "smooth" });
}


/* 监听页面滚动触发的函数 */
function windowScrollHandler(){
  progress.value = parseInt(((window.scrollY) / (document.documentElement.scrollHeight)) * 100) + "%"

  let visibleTitles = []

  for (let i = titles.value.length - 1; i >= 0; i--) {
      const title = titles.value[i];
      if (title.scrollTop <= window.scrollY) {
          if (currentTitle.id === title.id) return;

          Object.assign(currentTitle, title);

          // 展开节点
          setChildrenVisible(title, true);
          visibleTitles.push(title);

          // 展开父节点
          let parent = title.parent;
          while (parent) {
              setChildrenVisible(parent, true);
              visibleTitles.push(parent);
              parent = parent.parent;
          }

          // 折叠其余节点
          for (const t of titles.value) {
              if (!visibleTitles.includes(t)) {
                  setChildrenVisible(t, false);
              }
          }
          return;
      }
  }
}

// 目录点击移动函数
let handleAnchorClick = (anchor: any) => {
  const preDom = preview.value
  const {lineIndex} = anchor;
  const heading = preDom.$el.querySelector(`[data-v-md-line="${lineIndex}"]`);
  if (heading) {
    preDom.scrollToTarget({
      target: heading,
      scrollContainer: window,
      top: 60,
    });
  }
}

let handleCopyCodeSuccess = async (code: string) => {
  let copyAgreementText = `
            /**
            * @author: ${articleInfo.userParty}
            * 文章链接:${location.href}
            * 本代码基于 CC BY 4.0 许可进行授权。
            * 详细信息请访问: https://creativecommons.org/licenses/by/4.0/
            */
            `
  let clipboard = new Clipboard('.v-md-copy-code-btn', {
    text: function () {
      let copyCode = code + copyAgreementText
      return copyCode
    }
  })

  await clipboard.on('success', () => {
    notification.open({
      top: '76px',
      message: '复制成功~',
      description: '快去粘贴试试吧 CV仔 hhhhhhh',
      icon: () => h(SmileOutlined, {style: 'color: #108ee9'}),
    });
    clipboard.destroy()
  })

  await clipboard.on('error', (e: any) => {
    message.error('快捷复制失败,请手动')
    clipboard.destroy()
  })
}

watch(() => route.params.articleId, (newVal, oldVal) => {
  requestArticle()
})

let tagHandler = (tag: any) => {
  let encryTagId = encryData(tag.tagId)
  router.push(`/tag?tagId=${encryTagId}`)
}

// 跳转
let switchDetail = (articleId: number) => {
  let encryArticleId = encryData(articleId)
  router.push({name: "Detail", params: {articleId: encryArticleId}})
}


// 图片预览设置
let previewSetting = reactive({
  visable: false,
  imgList: [],//图片预览地址列表
  src: '', // 当前预览地址
  setVisible: (value) => {
    previewSetting.visable = value
  }
})

// 图片点击预览
let imgClickHandler = (imgList, index) => {
  previewSetting.imgList = imgList
  previewSetting.src = imgList[index]
  previewSetting.setVisible(true)
}

// 点赞
let likeActive = ref<boolean>(false)

let checkActive = () => {
  let id = getArticleId()
  let findIndex = $store.state.article.haveLikeList.findIndex((item: any) => item == id)
  console.log(findIndex)
  if (findIndex >= 0) {
    return likeActive.value = true
  }
}
checkActive()

const likeClick = async () => {
  let id = getArticleId()
  let findIndex = $store.state.article.haveLikeList.findIndex((item: any) => item == id)
  if (findIndex >= 0) {
    return message.warning('知道您喜欢我但是您已经点过了')
  }
  let data = await updateArticleLikeCount(id)
  if (data.code == 200) {
    likeActive.value = true
    $store.commit('article/addHaveLikeList', getArticleId())
    message.success('点赞成功!  蟹蟹~')
  } else {
    message.error('点赞失败')
  }
}

</script>

<template>
  <div class="detail">
    <Banner v-if="articleInfo.articleCover" :imgPath="articleInfo.articleCover"></Banner>
    <MainCenter class="detail-content">
      <a-row>
        <a-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24" :xxl="18" class="main-left">
          <a-skeleton v-if="isLoading" :active="true"/>
          <div v-else class="detail-desc">
            <h1 class="article-title">{{ articleInfo.articleTitle }}</h1>
            <div class="article-public-info">
              <span class="article-public-user-name">作者：{{ articleInfo.userParty }}</span>
              <span class="article-public-time">
                                <ClockCircleOutlined class="article-public-time-icon"/>{{ articleInfo.publicTime }}
                            </span>
              <span class="article-public-view">
                                <EyeOutlined class="article-public-time-icon"></EyeOutlined>{{ articleInfo.viewsCount }}
                            </span>
            </div>
          </div>
          <v-md-preview ref="preview" :text="articleInfo.articleContent" class="markdown-body"
                        codemirror-style-reset @image-click="imgClickHandler" @copy-code-success="handleCopyCodeSuccess"></v-md-preview>
          <div class="article-tags">
            <p>标签: <span v-for="tag in articleInfo.tags" :key="tag.tagId" class="tag-item"
                           @click="tagHandler(tag)">{{ tag.tagName }}</span></p>
          </div>
          <!-- 协议署名 -->
          <div class="agrrement">
            <p>&copy;本博客采用
              <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>
              协议进行许可</p>
          </div>
          <!--                  -->
          <div class="like-utils">
            <div :class="[likeActive ? 'active-out-line' : '']" class="like-out-line" @click="likeClick">
              <LikeOutlined/>
            </div>
          </div>

          <div class="article-context-box">
            <div v-if="articleContext.prevArticle.articleTitle" class="left-box flex">
              <div class="tag-title">
                上一篇
              </div>
              <div class="article-title">
                <span @click="switchDetail(articleContext.prevArticle.articleId)">{{
                    articleContext.prevArticle.articleTitle
                  }}</span>
              </div>
            </div>
            <div v-if="articleContext.nextArticle.articleTitle" class="right-box flex">
              <div class="tag-title">
                下一篇
              </div>
              <div class="article-title">
                <span @click="switchDetail(articleContext.nextArticle.articleId)">{{
                    articleContext.nextArticle.articleTitle
                  }}</span>
              </div>
            </div>
          </div>

          <!--        添加评论          -->
          <div id="detailsComments" class="luox-comment-box"></div>
        </a-col>
        <a-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24" :xxl="6" class="main-right">
          <div v-if="titles.length!==0" class="right-box anchor-list-box-min-height">
            <div class="article-menu">
              <div class="left">
                <h4>目录</h4>
              </div>
              <div class="right">
                {{ progress }}
              </div>
            </div>
            <div class="catalog-content">
            <div
                v-for="title in titles"
                :key="title.id"
                @click="scrollToView(title.scrollTop)"
                :class="[
                    'catalog-item',
                    currentTitle.id == title.id ? 'active' : 'not-active',
                ]"
                :style="{ marginLeft: title.level * 20 + 'px' }"
                v-show="title.isVisible"
                :title="title.rawName"
            >
                {{ title.name }}
            </div>
        </div>
          </div>
          <div class="right-box host-article-list">
            <h2>推荐文章</h2>
            <div v-for="article in hostList" :key="article.articleId" class="host-article-list-box">
              <div class="host-article-title clap-ellipsis" @click="switchDetail(article.articleId)">
                {{ article.articleTitle }}
              </div>
              <div class="host-article-info">
                <span>阅读量: <span>{{ article.viewsCount }}</span> </span>
                <span class="host-article-public">
                                  <ClockCircleOutlined></ClockCircleOutlined>  {{ article.publicTime }}
                                </span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </MainCenter>
    <!--   预览图片   -->
    <a-image
        :preview="{
            visible:previewSetting.visable,
            onVisibleChange: previewSetting.setVisible,
          }"
        :src="previewSetting.src"
        :style="{display:'none'}"
        :width="200"
    />
  </div>
</template>

<style lang="scss" scoped>
::v-deep ::selection {
  background-color: var(--luox-primary-color) !important;
  color: #fff;
}

::v-deep .v-md-pre-wrapper {
  // background: linear-gradient(180deg, rgb(224 191 255 / 41%), transparent) !important;
  background-color: #ededed;
  border: none !important;
}

::v-deep .github-markdown-body div[class*=v-md-pre-wrapper-].line-numbers-mode:after {
  background: transparent;
}

::v-deep .github-markdown-body a {
  color: var(--luox-primary-color) !important;
}

::v-deep .github-markdown-body hr {
  background: linear-gradient(180deg, rgb(224 191 255 / 56%), transparent) !important;
  height: .07em;
}

::v-deep .home-content .home-main {
}

::v-deep #veditor {
  background-image: url(https://cdn.jsdelivr.net/gh/drew233/cdn/20200409110727.webp); /* 修改自己喜欢的图片链接即可 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  background-color: rgba(255, 255, 255, 0);
  resize: vertical
}

/* 防止图片遮住输入框文字 */
::v-deep #veditor:focus{
  background-position-y: 200px;
  transition: all 0.2s ease-in-out 0s;
}

.detail {
  width: 100%;

  .detail-content {
    padding: 1.5rem;
    width: 100%;
    background: #f2f3f5;

    .main-left {
      background: #fff;
      height: max-content;

      .detail-desc {
        padding: 1.2rem 1.5rem;
        border-bottom: 1px dashed #e9e9e9;

        .article-title {
          font-size: 1.8rem;
          font-weight: bolder;
          margin: 1rem 0px;
        }

        .article-public-info {
          font-size: 1.2rem;
          color: #6c6b6b;

          span {
            font-weight: 500;
          }

          .article-public-time {
            margin-left: 15px;
          }

          .article-public-view {
            margin-left: 15px;
          }

          .article-public-time-icon {
            margin-right: 5px;
          }
        }
      }

      ::v-deep .v-md-editor-preview {
        background: #fff;
        padding: 1.2rem;

        .github-markdown-body {
          padding: 0px;
          // 表格背景
          background-image: linear-gradient(90deg, rgba(159, 219, 252, .15) 3%, transparent 0), linear-gradient(1turn, rgba(159, 219, 252, .15) 3%, transparent 0);
          background-size: 20px 20px;
          background-position: 50%;
        }
      }

      .article-tags {
        padding: 0px 1.2rem;

        p {
          font-size: 14px;

          span {
            cursor: pointer;
            border-radius: 8px;
            margin: 0.5rem 0.5rem;
            padding: 5px 8px;
            color: #8a919f;
            font-size: 12px;
            background-color: #f2f3f5;
            transition: .3s all;

            &:hover {
              background: rgba(173, 176, 181, 0.278);
            }
          }
        }
      }

      .agrrement {
        padding: 1.2rem 1.2rem 0px 1.2rem;

        p {
          font-size: 14px;
          color: #8a919f;

          span {
            font-size: 12px;
            background-color: #f2f3f5;
          }
        }
      }

      // 上下文
      .article-context-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;

        .left-box {
          width: 50%;
          align-items: center;
          margin-right: 8px;
        }

        .right-box {
          margin-left: 8px;
          align-items: center;
          width: 50%;
        }

        .tag-title {
          border-radius: 8px;
          width: max-content;
          padding: 5px 8px;
          color: #8a919f;
          font-size: 12px;
          background-color: #f2f3f5;
          margin-right: 8px;
        }

        .article-title {
          width: calc(100% - 100px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          font-weight: 400;
          cursor: pointer;
          transition: .3s all;

          span {
            font-size: 14px;
            font-weight: 400;
            cursor: pointer;
          }

          span:hover {
            color: var(--luox-primary-color);
          }
        }
      }
    }

    .main-right {
      position: sticky;
      top: calc(56px + 1.5rem);
      padding: 0px 1.5rem;
      height: max-content;

      .right-box {
        padding: 15px 20px;
        background: #fff;
        margin-bottom: 1.5rem;

        .anchor-list-box-min-height {
          max-height: 500px;
          overflow-y: auto;
        }

        h1, h2, h3, h4, h5, h6, div {
          transition: .3s all;
          cursor: pointer;

          &:hover {
            color: var(--luox-primary-color);
          }
        }
      }

      .host-article-list-box {
        display: flex;
        flex-direction: column;
        align-items: start;
        margin: 15px 0px;

        .host-article-title {
          font-size: 12px;
          line-height: 22px;
          -webkit-line-clamp: 2;
          font-weight: 500;
          margin-bottom: 5px;
          word-break: break-all;
          cursor: pointer;

          &:hover {
            color: var(--luox-primary-color);
          }
        }

        .host-article-info {
          .host-article-public {
            margin-left: 15px;
          }

          span {
            color: #6c6b6b;
            font-size: 12px;
            font-weight: 500;
          }
        }

        &:last-child {
          margin-bottom: 0px;
        }
      }

      .anchor-list-box {

      }
    }
  }
}

::v-deep.ant-skeleton {
  padding: 1.5rem;
}

// 点赞
.like-utils {
  padding: 1.2rem 1.2rem 0px 1.2rem;

  .like-out-line {
    cursor: pointer;
    transition: .3s all;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
    color: #cccccc;

    &:hover {
      color: var(--luox-whrite-color);
      background-color: var(--luox-primary-color);
      border-color: var(--luox-primary-color);
    }
  }

  .active-out-line {
    color: var(--luox-whrite-color);
    background-color: var(--luox-primary-color);
    border-color: var(--luox-primary-color);
  }
}

/* 留言 */
.luox-comment-box {
  margin: 1.5rem 0px;
  padding: 1.5rem 1.5rem;
  background-color: #fff;
}
.banner {
  display: none;
}

// xs
@media screen and (max-width: 480px) {
  .banner {
    display: block;
  }
  .detail-content {
    padding: 0px !important;
  }
  .main-left {
    max-width: 100vw !important;
  }
  .main-right {
    margin-top: 1.5rem;
  }
  .anchor-list-box-min-height {
    display: none;
  }
}

// sm
@media screen and (max-width: 576px) {
  .detail-content {
    padding: 0px !important;
  }
  .banner {
    display: block;
  }
  .main-left {
    max-width: 100vw !important;
  }
  .main-right {
    margin-top: 1.5rem;
  }
  .anchor-list-box-min-height {
    display: none;
  }
}


.catalog-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
    padding: 20px 24px;
    width: 100%;
    margin-top: 25px;
    box-sizing: border-box;
}

.catalog-card-header {
    text-align: left !important;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.catalog-icon {
    font-size: 18px;
    margin-right: 10px;
    color: dodgerblue;
}

.catalog-card-header div > span {
    font-size: 17px;
    color: #4c4948;
}

.progress {
    color: #a9a9a9;
    font-style: italic;
    font-size: 140%;
}

.catalog-content {
    max-height: calc(100vh - 120px);
    overflow: auto;
    margin-right: -24px;
    padding-right: 20px;
}

.catalog-item {
    color: #666261;
    margin: 5px 0;
    line-height: 28px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 14px;
    padding: 2px 6px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    &:hover {
        color: var(--luox-primary-color);
    }
}

.active {
    background-color: var(--luox-primary-color);
    color: white;

    &:hover {
        background-color: var(--luox-primary-color);
        color: white !important;
    }
}

.article-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .right {
    font-size: 18px;
    font-weight: 200;
    font-style: oblique;
  }
}
</style>
